<template>
  <div>
    <div>Personal ID Card</div>
  </div>
</template>

<script>
customElements.define('my-details',
  class extends HTMLElement {
    constructor() {
      super();

      const template = document.getElementsByTagName('template')[0];

      const templateContent = template.content;

      const shadowRoot = this.attachShadow({mode: 'open'});
      shadowRoot.appendChild(templateContent.cloneNode(true));
    }
  }
);
</script>

<style>
  div {
    background: #00f;
    border: 1px solid #0f0;
  }
</style>